<template>
    <div class="body">
        <div class="user-box" v-if="member && !loading">
            <div class="user-img">
                <img src="../../assets/images/ccm.jpeg">
            </div>
            <div class="user-personal" style="padding:0;text-align:center;">
                <p class="user-name"><Icon style="color:#19BE6B;padding-right:12px;" type="person"></Icon>{{member.name}}</p>
                <p class="user-gold"><Icon style="color:#19BE6B;padding-right:12px;" type="social-usd"></Icon>储钱罐: {{member.gold}}  金币</p>
                <p class="user-class"><Icon style="color:#19BE6B;padding-right:12px;" type="university"></Icon>帐号: {{member.phone}}</p>
            </div>
            <div class="tips hide-in-mobie">
               	更多
            </div>
            <!--设置中心-mobie-->
            <div class="show-in-mobie" style="width: 100%; overflow: hidden;padding-top: 25px;">
            	<Menu mode="horizontal" :active-name="$route.query.name">
			        <MenuItem name=null>
			        	<span @click="seeAuditing(null)"><Icon type="person"></Icon>个人资料</span>
			        </MenuItem>
			        <MenuItem name="card">
			        	<span @click="seeAuditing('card')"><Icon type="aperture"></Icon>会员信息</span>
			        </MenuItem>
			        <MenuItem name="auditing">
			        	<span @click="seeAuditing('auditing')"><Icon type="ios-checkmark"></Icon> 翻译进度</span>
			        </MenuItem>
			        <MenuItem name="gold" >
			        	<span @click="seeAuditing('gold')"><Icon type="social-usd"></Icon> 充值</span>
			        </MenuItem>
			    </Menu>
            </div>

            <div class="set-personal hide-in-mobie">
                <div class="set-personal-title">设置中心</div>
                <div class="set-content-list">
                    <li  :class="[{'set-active': (name == null)}]" @click="seeAuditing(null)"><Icon style="padding-right:12px;" type="person"></Icon>个人资料</li>
                    <li  :class="[{'set-active': (name == 'card')}]" @click="seeAuditing('card')"><Icon style="padding-right:12px;" type="aperture"></Icon>会员信息</li>
                    <!-- <li :class="[{'set-active': (name == 'password')}]" @click="seeAuditing('password')"><Icon style="padding-right:12px;" type="edit"></Icon>修改密码</li> -->
                    <li  :class="[{'set-active': (name == 'auditing') }]" @click="seeAuditing('auditing')"><Icon style="padding-right:12px;" type="ios-checkmark"></Icon>翻译进度</li>
                    <li  :class="[{'set-active': (name == 'gold') }]" @click="seeAuditing('gold')"><Icon style="padding-right:12px;" type="social-usd"></Icon>充值</li>
                </div>
            </div>
        </div>

        <div class="user-content" v-if="name == null && !loading && member">
            <div class="user-content-title perssonal-mesg">
                <Icon style="padding-right:12px;color:#19BE6B;" type="ios-checkmark"></Icon>个人资料
            </div>

            <div style="width: 50%;margin: 0px 25%">
                <Form ref="form" :label-width="100">
                    <Form-item label="昵称：" prop="name">
                        {{ member.name }}
                    </Form-item>
                    <Form-item label="帐号：">
                        {{ member.phone }}
                    </Form-item>
                    <Form-item label="金币：">
                        {{ member.gold }}
                    </Form-item>
                    <Form-item label="性别：">
                        {{ member.sexText }}
                    </Form-item>
                </Form>
            </div>

        </div>

        <!-- 翻译进度 -->

        <div class="user-content" v-if="name == 'auditing' && !loading">

            <div class="user-content-title">
                <Icon style="padding-right:12px;color:#19BE6B;" type="ios-checkmark"></Icon>翻译进度
            </div>

            <div class="user-steps" v-for="(item, index) in auditing" :key="index">

                <!-- <Steps :current="3"  v-if="item.uploads.name"> -->
                <Steps :current="3"  v-if="item.uploads.name" :status="item.status == 'NO' ? 'error' : item.status == 'YES' ? 'finish' : 'wait'">

                    <Step title="上传翻译文件:" :content="item.uploads.name"></Step>
                    <Step title="法规名称:" :content="item.statute.data.name"></Step>
                    <Step title="审核结果:" :content="item.statusText"></Step>

                </Steps>
            </div>
        </div>

        <!-- 升级会员 -->

        <div class="user-content user-content2" v-else-if="name == 'card' && member && !loading">

            <div class="user-content-title">
                <Icon style="padding-right:12px;color:#19BE6B;" type="aperture"></Icon>会员信息
            </div>
            <Row>
                <Col span="12" v-if="member.statute">

                </Col>
                <Col span="12" v-if="member.Term">

                </Col>
            </Row>

            <div class="user-vip">

                <Row>
                    <Col span="12" v-if="member.statute">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                法规会员卡
                            </p>
                            <p class="card-box-membe-time">
                                {{ member.statute.data.start_times }} - {{ member.statute.data.end_times }}
                            </p>
                            <p class="card-box-membe-status">
                                {{ member.statute.data.statusText }}
                                <span v-if="member.statute.data.status== 'YES'" class="card-box-membe-status-detail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;享 {{ member.statute.data.discount }} 折优惠</span>
                            </p>
                        </div>
                    </Col>
                    <Col span="12" v-if="member.term">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                术语会员卡
                            </p>
                            <p class="card-box-membe-time">
                                {{ member.term.data.start_times }} - {{ member.term.data.end_times }}
                            </p>
                            <p class="card-box-membe-status">
                                {{ member.term.data.statusText }}
                                <span v-if="member.term.data.status== 'YES'" class="card-box-membe-status-detail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;享 {{ member.term.data.discount }} 折优惠</span>
                            </p>
                        </div>
                    </Col>
                    <Col span="12" v-if="member.questions">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                问答会员卡
                            </p>
                            <p class="card-box-membe-time">
                                {{ member.questions.data.start_times }} - {{ member.questions.data.end_times }}
                            </p>
                            <p class="card-box-membe-status">
                                {{ member.questions.data.statusText }}
                                <span v-if="member.questions.data.status== 'YES'" class="card-box-membe-status-detail">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;享 {{ member.term.data.discount }} 折优惠</span>
                            </p>
                        </div>
                    </Col>
                    <Col  span="24" >
                        <br>
                        <hr>
                        <br>
                    </Col>
                    <Col span="12" v-if="statuteCard">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                购买法规卡
                            </p>
                            <p class="card-box-member-tip">
                                可享受下载、阅读书籍折扣优惠！
                            </p>
                            <br>
                            <Radio-group v-model="card_id" vertical>
                                <Radio :label="item.id + '.' + index + '.statute'" v-for="(item, index) in statuteCard" :key="index" class="term-card">
                                    {{ item.name }} -- 持续时间 {{ item.days }} 天  -- {{ item.money }} 金币
                                </Radio>
                            </Radio-group>
                        </div>

                    </Col>
                    <Col span="12" v-if="termCard">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                购买术语卡
                            </p>
                            <p class="card-box-member-tip">
                                可查看更多术语！
                            </p>
                            <br>
                            <Radio-group v-model="card_id" vertical>
                                <Radio :label="item.id + '.' + index + '.term'" v-for="(item, index) in termCard" :key="index" class="term-card">
                                    {{ item.name }} -- 持续时间 {{ item.days }} 天  -- {{ item.money }} 金币
                                </Radio>
                            </Radio-group>
                        </div>
                    </Col>
                    <Col span="12" v-if="questionCard">
                        <div class="card-box-member">
                            <p class="card-box-member-title">
                                购买问答卡
                            </p>
                            <p class="card-box-member-tip">
                                可查看更多问答信息！
                            </p>
                            <br>
                            <Radio-group v-model="card_id" vertical>
                                <Radio :label="item.id + '.' + index + '.question'" v-for="(item, index) in questionCard" :key="index" class="term-card">
                                    {{ item.name }} -- 持续时间 {{ item.days }} 天  -- {{ item.money }} 金币
                                </Radio>
                            </Radio-group>
                        </div>
                    </Col>
                    <Col  span="24" v-if="card_id != null" class-name="buyBtn">
                        <Button type="success" :disabled="card_id == null ? true : false"  long @click="showVipModel()">购买</Button>
                    </Col>
                </Row>



            </div>



        </div>

        <!-- 充值 -->

        <div class="user-content" v-if="name == 'gold' && member && !loading">

            <div class="user-content-title">
                <Icon style="padding-right:12px;color:#19BE6B;" type="ios-checkmark"></Icon>充值
            </div>
            <div class="alipay-box">
                <Form ref="formPay" :label-width="120">

                    <Form-item label="我的金币余额：" prop="name">
                        {{ member.gold }}
                    </Form-item>
                    <Form-item label="购买：">
                        <Input-number :max="1000000" :min="1" v-model="money"></Input-number> 金币 （1 人民币 = 1 金币）
                    </Form-item>
                    <Form-item label="付款金额：">
                        ￥ {{ money }}
                    </Form-item>
                    <FormItem label="支付方式">
                        <RadioGroup v-model="type">
                            <Radio label="RECH">支付宝</Radio>
                            <Radio label="wxpay">微信</Radio>
                        </RadioGroup>
                    </FormItem>
                    <Form-item >
                        <Button type="primary" @click="pay"> 购 买 </Button>
                    </Form-item>
                </Form>
            </div>
        </div>
        <Modal
            v-model="vipModel"
            title="支付"
            ok-text="确认支付"
            v-if="member"
            @on-ok="doPayGold"
           >
            <p style="padding: 10px;font-size:20px;">支付金币：{{ this.card_gold }} G</p>
            <p style="padding: 10px;font-size:20px;" v-if="member">金币余额：{{ this.member.gold }} G</p>
        </Modal>
        <Modal v-model="qrcodeModel" title="请扫下面二维码支付" width="250">
            <div id="code" style="display:flex; justify-content:center;"></div>
        </Modal>
    </div>
</template>
<script>
    import QRCode from 'qrcodejs2';
    export default {
        data () {
            return {
                member: null,
                auditing:[],
                uploads_url:null,
                uploads_name:null,
                statute_id:null,
                statuteCard: [],
                termCard: [],
                questionCard:[],
                card_id: null,
                card_gold: null,
                money: 1,
                type:'RECH',
                name: this.$route.query.name,
                vipModel:false,
                loading: false,
                qrcodeModel:false
            }
        },
        mounted() {
            this.getAuther();
            if (this.name == 'card'
                    && this.termCard.length == 0
                    && this.statuteCard.length == 0
                    && this.questionCard.length == 0
                    ){
                // this.fetchCard();
                this.fetchCard('STATUTE','statuteCard');
                this.fetchCard('TERM','termCard');
                this.fetchCard('QUESTION','questionCard');
            }
        },
        watch: {
            $route() {
                this.loading = true;
                this.name = this.$route.query.name;
                this.changeName();
                if ( this.name == 'card'
                     && this.termCard.length == 0
                     && this.statuteCard.length == 0
                     && this.questionCard.length == 0
                     ) {
                        this.fetchCard('STATUTE','statuteCard');
                        this.fetchCard('TERM','termCard');
                        this.fetchCard('QUESTION','questionCard');
                }
            },
            loading() {
                if ( this.loading ) {
                    this.$store.commit('mainLoading', true);
                }else {
                    this.$store.commit('mainLoading', false);
                }
            }
        },
        methods:{
            getAuther() {
                this.$store.commit('mainLoading', true);
                this.$http.get('/member/me?include=statute,term,questions&fe=1' ).then(rets => {
                    this.member = rets.data.data;
                }).then(() => {
                    this.$http.get('/auditing/list',{
                    	params: {
                    		member_id:this.member.id,
                    		include: 'statute,member',
                    		fe:1
                    	}
                    })
                    .then(ret => {
                        this.auditing = ret.data.data;
                        this.$store.commit('mainLoading', false);
                    }).catch(err => {
                        this.$Message.error( '获取上传翻译失败..');
                    })
                }).catch(err => {
                    this.$Message.error( '请登录..');
                })
            },
            // 查看翻译进度
            seeAuditing(names){
                let query = {
                    name: names
                }
                this.$router.push({path: this.$route.path, query});
            },
            routeLink(link) {
                  this.$router.push({path: link});
            },
            // 显示支付页面
            showVipModel(){
                var card = this.card_id.split(".");
                if ( card[2] == 'term' ) {
                    this.card_gold = this.termCard[ card[1] ].money;
                }else if(card[2] == 'statute') {
                    this.card_gold = this.statuteCard[ card[1] ].money;
                }else{
                    this.card_gold = this.questionCard[ card[1] ].money;
                }
                this.vipModel = true;
            },
            // 确认支付
            doPayGold() {
                var card = this.card_id.split(".");
                // if ( this.member.gold < ( card[2] == 'term' ? this.termCard[card[1]].money : this.statuteCard[card[1]].money ) )
                if((this.termCard.length != 0 && this.member.gold < this.termCard[card[1]].money) && 
                   (this.statuteCard.length != 0 && this.member.gold < this.statuteCard[card[1]].money) && 
                   (this.questionCard.length != 0 && this.member.gold < this.questionCard[card[1]].money) 
                   ) {
                    this.$Message.error('金币余额不足，请及时充值！');
                    return false;
                }
                this.$Loading.start();
                // 处理数组
                var str = '';
                if(card[2] == 'term'){
                    str = 'TERM';
                }else if(card[2] == 'statute'){
                    str = 'STATUTE';
                }else{
                    str = 'QUESTION'
                }
                var map = {
                    type:  str,
                    card_id:  card[0],
                    fe:1
                };
                this.$http.post('rent/add',  map)
                .then(ret => {
                    this.$Message.success('支付成功');
                    this.$Loading.finish();
                    this.getAuther();
                }).catch(err => {
                      if ( err.response.data ) {
                          this.$Message.error(err.response.data.message);
                      }else {
                          this.$Message.error('未知错误');
                      }
                      this.$Loading.error();
                })
            },
            // 转换显示内容
            changeName() {
                var ob = this;
                setTimeout(function(){
                    ob.loading = false;
                }, 1500, ob);
            },
            fetchCard(type,typeList){
                this.$http.get('/card/list', {
                    params: {
                        type: type,
                        status: '1',
                        fe:1
                    }
                })
                .then(res=>{
                    this[typeList] = res.data.data;
                })
            },
            // 查找会员卡
            /*fetchCard() {
                this.$store.commit('mainLoading', true);

                this.$http.get('/card/list', {
                	params: {
                		type: 'STATUTE',
                		status: '1',
                		fe:1
                	}
                })
                .then(rets => {
                    this.statuteCard = rets.data.data;
                }).then(() => {
                    this.$http.get('/card/list',{
                    	params: {
                    		type: 'TERM',
                    		status: '1',
                    		fe:1
                    	}
                    })
                    .then(ret => {
                        this.termCard = ret.data.data;

                        this.$store.commit('mainLoading', false);
                    }).catch(err => {
                        this.$Message.error( '获取上传翻译失败..');
                    })
                }).catch(err => {
                    this.$Message.error( '请登录..');
                })
            },*/
            // 支付
            pay() {
                this.$Loading.start();
                let api = null;
                if(this.type == 'RECH'){
                    api = '/pay/pay'
                }else if(this.type == 'wxpay'){
                    api = '/payWeixin/pay';
                }
                this.$http.post(api, {
                    type: this.type,
                    money: this.money,
                    fe:1
                }).then(res => {
                    // 跳转
                    // location.href = rets.data.url;
                    if(this.type == 'wxpay'){
                        this.qrcodeModel = true;
                        document.getElementById("code").innerHTML = '';
                        new QRCode(document.getElementById("code"), {
                            text:res.data.url,
                            width : 120,
                            height : 120,
                            colorDark: "#000000",
                            colorLight: "#ffffff"
                        });
                        this.polling(res.data.consumption_id);
                    }else if(this.type == 'RECH'){
                        location.href = res.data.url;
                    }
                }).catch(err => {
                    this.$Message.error('支付失败..');
                });
            },
            polling(poll_id){
                let poll_interval = setInterval(_=>{
                    this.$http.get(`/consumption/${poll_id}`)
                    .then(res=>{
                        const data = res.data.data;
                        if(data.status == 'DONE'){
                            this.qrcodeModel = false;
                            this.$Message.success('支付成功');
                            clearInterval(poll_interval);
                            setTimeout(_=>{
                                location.href = '/personal?name';
                            },1500)
                        }
                    })
                },1000);
            }
        }
    }
</script>

<style scoped lang="less">

	.body{
		overflow: hidden;
	}
    .ivu-form-item-label {
        font-size: 20px;
    }
    .card-box-member {
        border: 1px dashed #ccc;
        margin: 5px 10px;
        padding: 10px;
        .card-box-member-title {
            font-size: 20px;
            color: #CD0000;
            font-weight: 600;
        }
        .card-box-membe-time {
            margin: 10px;
            color: #000;
        }
        .card-box-membe-status {
            margin: 10px;
            color: #000;
            font-size: 20px;

            .card-box-membe-status-detail {
                color: #CD0000;
                font-size: 16px;
            }
        }
        .card-box-member-tip {
            font-size: 14px;
            color: #000;
            margin: 10px 20px;
        }
    }

    .user-content{
        width: 920px;
        float: left;
        padding-left: 42px;
        padding-top: 50px;
        box-sizing: border-box;
        background: #fff;
        background-size: 100%;
    }

    .user-content2{
        width: 920px;
        float: left;
        padding-left: 42px;
        padding-top: 50px;
        height: auto;
    }
    .user-content-title{
        height: 50px;
        text-align: center;
        font-size: 28px;
    }
    .user-box{
        float: left;
        width: 280px;
        border-right:1px solid #eee;
        height: 580px;
        padding-top: 40px;
        background: #fff;
    }
    .user-img{
        width: 80px;
        height: 80px;
        overflow:hidden;
        margin-left: 10px;
        float: left;
        margin-right: 10px;
    }
    .user-personal{
        float: left;
        width: 178px;

    }
    .user-name{
        font-size: 20px;
        font-weight: 700;
    }
    .user-personal p{
        width: 100%;
        text-align: left;
    }

    .user-gold{
        margin-top: 16px;
    }
    .user-class{
        margin-top: 8px;
    }
    .editPersonalBox{
        width: 80%;
        margin:0 auto;
        height: 420px;
    }

    .ivu-steps-item{
        width: 33%!important ;
    }
    .user-steps{
        padding: 32px 0 32px 64px;
        border-bottom: 1px solid #eee;
    }
    .tips{
        width: 100%;
        height: 36px;
        float: left;
        line-height: 36px;
        background: #15CCAC;
        color: #fff;
        text-align: center;
        margin-top: 42px;
        cursor: pointer;
    }
    .tips-number{
        font-size: 20px;
        font-weight: 800;
    }

    .set-personal{
        width: 80%;
        margin: 30px auto 0;
        float: left;
        height: 280px;
        margin-left: 10%;
        border:1px solid #ccc;
        border-radius: 4px;
    }
    .set-personal-title{
        height: 36px;
        line-height: 36px;
        background: #eee;
        padding-left: 5%;
        border-left: 4px solid #15CCAC;
    }
    .set-content-list{
        height: 42px;
        line-height: 42px;
        text-align: center;
        margin-top: 10px;
        cursor: pointer;
    }

    .set-content-list .set-active{
        background: #eee;
    }
    .user-vip-myselft{
        height: 80px;
        line-height: 80px;
        font-size: 28px;
        font-weight: 800;
        text-align: center;
        color: #333;
    }
    .user-vip-title{
        text-align: center;
    }
    .user-vip-content{
        height: 120px;
        width: 780px;
        margin: 42px auto 0;
    }

    .user-vip-content li{
        width: 80px;
        height: 80px;
        border-radius: 100%;
        float: left;
        margin:0 35px;
        text-align: center;
        border:4px solid #333;
        line-height: 80px;
    }
    .user-vip-text{
        width: 120px;
        color: #15CCAC;
        font-size: 14px;
        font-weight: 800;
        text-align: left;
    }
    .user-vip-button{
        width: 240px;
        background: #15CCAC;
        height: 60px;
        line-height: 60px;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        font-weight: 800;
        font-size: 28px;
        margin:100px auto 0;
        cursor: pointer;
    }
    .alipay-box{
    	padding: 80px 100px;
    }
    .term-card{
    	font-size:18px;
    	margin: 10px;
    	color: red;
    	border: 1px dashed #000;
    	padding:5px;height:45px;
    }
    .buyBtn{
    	padding: 20px 0;
    }
    .perssonal-mesg{
    	margin-bottom: 50px;
    }
    .show-in-mobie{
    	display: none;
    }
    .hide-in-mobie{display: block;}

    @media (max-width:1024px){
	    .hide-in-mobie{display: none;}
	    .show-in-mobie{
	    	display: block;
	    }
	    .user-box{
	    	width: 100%;
	    	padding: 25px 0 0;
	    	border: none;
	    	height: auto;
	    	background: #F3F3F3;
	    }
	    .user-content{
	    	width: 100%;
	    	padding: 0;
	    	padding-top: 20px;
	    }
	    .user-content-title{
	    	height: 40px;
	    }
	    .alipay-box{
	    	padding: 20px 30px;
	    }
	    .ivu-col-span-12{
	    	width: 90%;
	    	margin-left: 5%;
	    }
	    .buyBtn{padding: 20px 5%;}
	    .term-card{
	    	font-size: 14px;
	    }
	    .perssonal-mesg{
	    	margin-bottom: 30px;
	    }
	    .ivu-menu-horizontal{
	    	height: 50px;
	    }
	    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu{
	    	width: 25%;
	    	text-align: center;
	    }
	    .ivu-menu-horizontal .ivu-menu-item, .ivu-menu-horizontal .ivu-menu-submenu{
	    	padding: 0;
	    }
	}
</style>
